<!--
 * @Author: 107w 8801453+lu-shangru@user.noreply.gitee.com
 * @Date: 2023-07-20 09:52:02
 * @LastEditors: 107w 8801453+lu-shangru@user.noreply.gitee.com
 * @LastEditTime: 2023-08-16 14:06:22
 * @Description:
 *
 * Copyright (c) 2023 by 107w, All Rights Reserved.
-->
<template>
  <!-- 点击菜单想事项 -->
  <el-dropdown trigger="click" @command="changeLanguage">
    <!-- 显示一个图标 -->
    <div style="font-size: 34px; cursor: pointer; margin-right: 10px;">
      <!-- <svg-icon icon-class="language" class="lang" /> -->
      <i style="font-size: 20px;" class="iconfont icon-fanyi lang_color" />
    </div>
    <!-- 下拉图标 -->
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item :disabled="this.$i18n.locale==='zh'" command="zh">中文</el-dropdown-item>
      <el-dropdown-item :disabled="this.$i18n.locale==='en'" command="en">English</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import { mapMutations } from 'vuex'
import Cookie from 'js-cookie'
export default {
  methods: {
    ...mapMutations(['setLang']),
    changeLanguage(type) {
      // 设置类型 先写入到 cookie
      Cookie.set('language', type)
      this.setLang(type)
      // 改变当前的语言
      this.$i18n.locale = type // 将当前的多语言类型改成对应的类型
      this.$message.success(this.$t('home.切换语言成功'))
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.lang_color {
  color: $navbarText;
}
.lang{
  color: #fff;
    font-size: 20px;
}
.green {
  height: 10px;
  width: 20px;
}
</style>
